<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 组件：
            定义：实现应用中局部功能的代码和资源的集合
            Vue中使用组件的步骤：
                1.创建组件：
                    语法：Vue.extend(option)，option基本和 new Vue(option) 时书写一样
                        区别：
                            1.el配置不用写，因为最终所有组件都由一个vm管理，由vm中的el决定服务那个容器
                            2.data必须写成函数，因为要避免组件复用时，数据存在引用关系，Vue也不支持对象式写法
                        注：使用template可以配置组件结构
                2.注册组件：
                    1.局部注册：new Vue时传入components配置
                    2.全局注册：Vue.component('组件名'，组件)
                    3.注册时的组件名就是之后使用的组件标签
                3.使用组件标签：
                    在要使用的位置书写组件名即可，如：
                        1.<school></school>
                        2.<school/>(需要Vue脚手架支持，否则会导致后面的组件不能渲染)
            组件名的定义：
                1.一个单词组成时：
                    1)首字母小写：school
                    2)首字母大写：School
                2.多个单词组成时：
                    1)kebab-case命名法：my-school
                    2)驼峰命名法：MySchool(需要Vue脚手架支持)
                注：
                    1.组件名不要起html中已存在的元素名,如：h2、H2都不行
                    2.可以使用name配置项指定组件在开发者工具中呈现的名字
            简写：const 组件名 = options
             -->
    <div id="root">
      <h1>{{msg}}</h1>
      <hr />
      <!-- 第三步：使用组件标签 -->
      <school></school>
      <student></student>
      <hr />
      <test></test>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      Vue.config.productionTip = false;

      //   第一步：创建Vue组件
      /* 组件定义时，不用写el配置，最终由注册组件的vm决定 */
      const school = Vue.extend({
        name: "school",
        template: `
        <div>
            <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
        </div>
        `,
        data() {
          return {
            name: "BiliBili大学",
            address: "浙江杭州",
          };
        },
      });
      const student = Vue.extend({
        name: "student",
        template: `
        <div>
            <h2>学生姓名：{{name}}</h2>
            <h2>学生学号：{{id}}</h2>
        </div>
        `,
        data() {
          return {
            name: "张三",
            id: 1,
          };
        },
      });
      
      //   组件的嵌套
      const hello = {
        template: `
            <div>
                <h2>{{msg}}</h2>
                <school></school>
                <student></student>
            </div>
        `,
        data() {
          return {
            msg: "正在嵌套组件",
          };
        },
        components: {
          school,
          student,
        },
      };
      
      //   第二步：注册组件
      //   1.全局注册组件
      Vue.component("school", school);
      //   2.局部注册组件
      new Vue({
        el: "#root",
        data: {
          msg: "组件化开发",
        },
        components: {
          student,
          test: hello,
        },
      });
    </script>
  </body>
</html>
